<!--动态排序柱状图-->
<template>
        <!--    切换24小时练最多和2020年考最多-->
        <el-dropdown style="padding: 50px 32px 0 32px;"  @command="handleCommand">
                <el-button type="primary">
                        考点类型<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <template #dropdown>
                        <el-dropdown-menu>
                                <el-dropdown-item divided command="practice">24小时练最多</el-dropdown-item>
                                <el-dropdown-item divided command="exam">2020年考最多</el-dropdown-item>
                                <!--                    <el-dropdown-item divided>双皮奶</el-dropdown-item>-->
                                <!--                    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>-->
                        </el-dropdown-menu>
                </template>
        </el-dropdown>
        <div id="main" style="width:1000px;height:600px;margin: 10px auto;"></div>
</template>
<script>
    import request from "../utils/request";

    const echarts = require('echarts');

    export default{
        data () {
            return {
                search: '',
                currentPage: 1,
                pageSize: 2020,
                total: 0,
                data0: [['info','num','year'],],
                isPractice: true,
                title: "24小时练最多",
                url: '/practiceMost',
                subTitle:'技术（软件）/信息技术类',
                colors: ["#19CAAD","#8CC7B5","#A0EEE1", "#BEE7E9", "#BEEDC7",
                        "#D6D5B7", "#D1BA74","#E6CEAC","#ECAD9E","#F4606C",
                        "#00008b","#f00","#ffde00","#002a8f","#003580","#ed2939",
                        "#000","#003897","#f93","#bc002d","#024fa2","#000","#00247d","#ef2b2d",
                        "#dc143c","#d52b1e","#e30a17","#00247d","#b22234"],
            };
        },
        created() {

        },
        methods: {
            initCharts () {

                    var chartDom = document.getElementById('main');
                    var myChart = echarts.init(chartDom);
                    var option;

                    var updateFrequency = 2000;
                    var dimension = 1;  //对应num的维度


                    request.get(this.url,{ // 请求/practiceMost接口
                            params: {
                                    pageNum: this.currentPage,
                                    pageSize: this.pageSize,
                                    search: this.search
                            }
                    }).then(res=>{

                            // console.log(res)

                            this.data0=[
                                    ['info','num','year'],
                            ]

                            var infos=[];
                            var colorMap={};


                            for (var i=0;i<res.data.records.length;i++)
                            {
                                    var info = res.data.records[i]['info'];
                                    var num = res.data.records[i]['num'];
                                    var day = res.data.records[i]['day'];
                                    var index = infos.indexOf(info);
                                    if(index===-1) {
                                            infos.push(info)
                                    }
                                    this.data0.push([info,num,day]);
                            }

                            // console.log(this.data0);
                            for (var i=0;i<infos.length;i++)
                            {
                                    colorMap[infos[i]]=this.colors[i%25];
                            }

                            console.log(infos.length)
                            console.log(infos)
                            console.log(colorMap)

                            // var data = res[0];
                            var data=this.data0;
                            var years = [];
                            for (var i = 0; i < data.length; ++i) {
                                    if (years.length === 0 || years[years.length - 1] !== data[i][2]) {
                                            years.push(data[i][2]);
                                    }
                            }
                            // console.log(years)

                            var startIndex = 0;
                            var startYear = years[startIndex];

                            var option = {
                                    title: {
                                            text: this.title,
                                            subtext: this.subTitle
                                    },
                                    grid: {
                                            top: 70,
                                            bottom: 30,
                                            left: 150,
                                            right: 100
                                    },
                                    toolbox: {  // 显示保存图片的按钮
                                            show: true,
                                            orient: 'horizontal',
                                            bottom: 10,
                                            right: 20,
                                            feature: {
                                                    saveAsImage: {}
                                            }
                                    },
                                    xAxis: {
                                            max: 'dataMax',
                                            label: {
                                                    formatter: function (n) {
                                                            return Math.round(n);
                                                    }
                                            },
                                            // axisLabel: {
                                            //         show: true,
                                            //         textStyle: {
                                            //                 fontSize: 14
                                            //         },
                                            //         formatter: function (value) {
                                            //                 // return '2021.08.'+value;
                                            //                 return value;
                                            //         },
                                            // },
                                    },
                                    dataset: {
                                            source: data.slice(1).filter(function (d) {
                                                    return d[2] === startYear;
                                            })
                                    },
                                    yAxis: {
                                            type: 'category',
                                            inverse: true,
                                            max: 10,
                                            axisLabel: {
                                                    show: true,
                                                    textStyle: {
                                                            fontSize: 14
                                                    },
                                                    formatter: function (value) {
                                                            return value;
                                                    },
                                                    rich: {
                                                            flag: {
                                                                    fontSize: 25,
                                                                    padding: 5
                                                            }
                                                    }
                                            },
                                            animationDuration: 300,
                                            animationDurationUpdate: 300
                                    },
                                    series: [{
                                            realtimeSort: true,
                                            seriesLayoutBy: 'column',
                                            type: 'bar',
                                            itemStyle: {
                                                    color: function (param) {
                                                            return colorMap[param.value[0]] || '#5470c6';
                                                            // console.log(param)
                                                            // return '#5470c6';
                                                    }
                                            },
                                            encode: {
                                                    x: dimension,
                                                    y: 0
                                            },
                                            label: {
                                                    show: true,
                                                    precision: 1,
                                                    position: 'right',
                                                    valueAnimation: true,
                                                    // valueAnimation: true,
                                                    fontFamily: 'monospace'
                                            }
                                    }],
                                    // Disable init animation.
                                    animationDuration: 0,
                                    animationDurationUpdate: updateFrequency,
                                    animationEasing: 'linear',
                                    animationEasingUpdate: 'linear',
                                    graphic: {
                                            elements: [{
                                                    type: 'text',
                                                    right: 160,
                                                    bottom: 60,
                                                    style: {
                                                            text: startYear,
                                                            // color: DC143C,
                                                            font: 'bolder 20px monospace',
                                                            fill: 'rgba(238, 59, 59, 0.8)'
                                                    },
                                                    z: 100
                                            }]
                                    }
                            };

                            // console.log(option);
                            myChart.setOption(option);

                            for (var i = startIndex; i < years.length - 1; ++i) {
                                    (function (i) {
                                            setTimeout(function () {
                                                    updateYear(years[i + 1]);
                                            }, (i - startIndex) * updateFrequency);
                                    })(i);
                            }

                            function updateYear(year) {
                                    var source = data.slice(1).filter(function (d) {
                                            return d[2] === year;
                                    });
                                    option.series[0].data = source;
                                    option.graphic.elements[0].style.text = '2021.08.'+year;
                                    myChart.setOption(option);
                            }

                    });

                    option && myChart.setOption(option);

            },

            handleCommand(command) {
                    if(command==='practice') {
                            this.isPractice=true;
                            this.title='24小时练最多';
                            this.url='/practiceMost'

                    } else {
                            this.isPractice=false;
                            this.title='2020年考最多';
                            this.url='/examMost'
                    }
                    this.initCharts();
                    // console.log(this.type)
            }

        },

        mounted () {
            this.initCharts();
            console.log("mounted")
        }
    }
</script>

<style scoped>

</style>